<template>
  <div class="example-container">
    <h2>聊天组件示例</h2>

    <!-- 示例1：全屏聊天窗口 -->
    <div class="demo-section">
      <h3>全屏聊天窗口</h3>
      <button @click="showChat = !showChat" class="demo-btn">
        {{ showChat ? '关闭' : '打开' }}聊天窗口
      </button>
      <div v-if="showChat" class="chat-demo">
        <Chat @close="showChat = false" user-name="张三" @send="handleSend" />
      </div>
    </div>

    <!-- 示例2：嵌入式聊天 -->
    <div class="demo-section">
      <h3>嵌入式聊天</h3>
      <div class="embedded-chat">
        <Chat user-name="李四" @send="handleSend" />
      </div>
    </div>

    <!-- 示例3：自定义样式 -->
    <div class="demo-section">
      <h3>自定义样式</h3>
      <div class="custom-chat">
        <Chat user-name="王五" @send="handleSend" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Chat from './index.vue';

const showChat = ref(false);

const handleSend = (message: string) => {
  console.log('发送消息:', message);
  // 这里可以集成实际的AI服务
};
</script>

<style scoped>
.example-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.demo-section {
  margin-bottom: 40px;
}

.demo-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 16px;
}

.demo-btn:hover {
  background: #2563eb;
}

.chat-demo {
  width: 100%;
  height: 600px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.embedded-chat {
  width: 400px;
  height: 500px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.custom-chat {
  width: 350px;
  height: 450px;
  border: 2px solid #667eea;
  border-radius: 16px;
  overflow: hidden;
}

h2 {
  color: #1e293b;
  margin-bottom: 32px;
}

h3 {
  color: #374151;
  margin-bottom: 16px;
}
</style>
